@extends('mainlayout')

@section('title','欢迎注册')

@section('css')
    @parent
@endsection

@section('contents')

    <section>
        <div style="height: 35px;background-color: #f5f5f5;"></div>
    </section>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="index.php" title="">首页</a>
                            <span><img src="images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a href="#" title="">注册</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="flat-checkout" >
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="box-checkout">
                        <h3 class="title">Welcome!</h3>
                        <div class="checkout-login">
                            欢迎注册，我们将为您提供丰富的产品体验...
                        </div>
                        <form enctype="multipart/form-data" action="{{url('registerDao')}}" method="POST" class="checkout" accept-charset="utf-8">
                            {{csrf_field()}}
                            <div class="billing-fields">
                                @include('common.validator')
                                <div class="fields-title">
                                    <h3>注册详情</h3>
                                    <span></span>
                                    <div class="clearfix"></div>
                                </div><!-- /.fields-title -->
                                <div class="fields-content">
                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="username">用户名 *</label>
                                            <input type="text" id="username" value="{{old('Member.username')}}" name="Member[username]" placeholder="Ali">
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="password">密码 *</label>
                                            <input type="password" id="password"  name="Member[password]" placeholder="请输入密码">
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>

                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="confirmpwd">确认密码 *</label>
                                            <input type="password" id="confirmpwd" name="confirmpwd" placeholder="请再次输入密码">
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="field-row">
                                        <p class="field-one-half">
                                            <label for="phone">手机号码 *</label>
                                            <input type="text" id="phone" value="{{old('Member.phone')}}" name="Member[phone]">
                                        </p>
                                        <div class="clearfix"></div>
                                        <p class="field-one-half">
                                            <label for="vififycode"></label>
                                            <input type="text" id="vififycode" value="{{old('vififycode')}}" name="vififycode"  placeholder="验证码">
                                            <label for="vififycode"></label>
                                        <p class="btn btn-warning">发送验证码</p>
                                        </p>
                                        <div class="clearfix"></div>
                                    </div>


                                    <div class="field-row">
                                        <label>地址 *</label>

                                        <select id="province" name="province" onchange="chooseProvince(this)">
                                            <option value="1">请选择省</option>
                                        </select>
                                        <!--此input元素用来承接本页面的省份下拉框选中的值，通过input提交给制定页面处理！！！下面的市区下拉框同理-->
                                        <input type="text" id="protext" name="Member[province]" style="display:none;">
                                        <br>

                                        <select id="city" name="city" onchange="chooseCity(this)">
                                            <option value="1">请选择市</option>
                                        </select>
                                        <input type="text" id="citytext" name="Member[city]" style="display:none;">
                                        <br>

                                        <select id="area" name="area">
                                            <option value="1">请选择区</option>
                                        </select>
                                        <input type="text" id="areatext" name="Member[area]" style="display:none;">

                                    </div>

                                    <div class="field-row">
                                        <label for="address">详细地址 *</label>
                                        <input type="text" id="address" name="Member[address]" placeholder="请完善详细地址，具体到街道、门牌号">
                                    </div>
                                    <div class="field-row">
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="field-row">
                                        <input type="submit" name="register" value="注册">
                                    </div>

                                </div><!-- /.fields-content -->
                            </div><!-- /.billing-fields -->
                        </form><!-- /.checkout -->
                    </div><!-- /.box-checkout -->
                </div><!-- /.col-md-7 -->
                <div class="col-md-5">
                    <div class="cart-totals style2">
                        <img src="{{asset('images/logos/logo.png')}}" alt="">
                    </div><!-- /.cart-totals style2 -->
                </div>
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-checkout -->

@endsection

@section('js')
    @parent

    <script>
        var enable = true;
        $('.btn-warning').click(function (event) {
            if(enable==false){
                return;
            }

            //计时器，避免用户频繁发送短信
            var phone = $('input[id=phone]').val();
            if(phone!=""){
                enable = false;
                var num = 60;
                var interval  =window.setInterval(function () {
                    $('.btn-warning').html(--num+'s重新发送');
                    if(num==0){
                        enable = true;
                        window.clearInterval(interval);
                        $('.btn-warning').html('重新发送');
                    }
                },1000);
            }

            $.ajax({
                url:'sendSMS',
                dataType:'json',
                cache:false,
                data:{phone:phone},

                success:function (data) {
                    if(data==null){
                        alert("服务器端错误")
                    }
                    if(data.status!=0){
                        alert(data.message);
                    }
                    if(data.status==0){
                        alert(data.message);
                    }
                },
                
                error:function (xhr,status,error) {
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
            })
        });
    </script>

    <!--添加收货地址-->
    <script>
        $('#province').change(function () {
            var province_note = $('#province').find("option:selected").text();
            document.getElementById("protext").value = province_note;
            document.getElementById("citytext").value = $("#city").find("option:selected").text();
        });
    </script>

    <script>
        $('#city').change(function () {
            var city_note = $('#city').find("option:selected").text();
            document.getElementById("citytext").value = city_note;
        });
    </script>

    <script>
        $('#area').change(function () {
            var area_note = $('#area').find("option:selected").text();
            document.getElementById("areatext").value = area_note;
        });
    </script>



@endsection